<script lang="ts" setup>
  import { watch, ref, computed } from 'vue';
  import { useRouter, RouterView } from 'vue-router';
  import { Affix, Card, Button, Avatar, Menu, MenuItem, SubMenu } from '@arco-design/web-vue';
  import {
    IconHome,
    IconBook,
    IconComputer,
    IconQuestionCircle,
    IconGift,
  } from '@arco-design/web-vue/es/icon';
  import { useUserStore } from '/@/store/modules/user';

  interface CreatorMenu {
    title: string;
    key?: string;
    icon?: any;
    children?: CreatorMenu[];
  }
  const menus: CreatorMenu[] = [
    { title: '首页', key: 'CREATOR_HOME', icon: IconHome },
    {
      title: '内容管理',
      icon: IconBook,
      children: [
        { title: '文章管理', key: 'CREATOR_CONTENT_ARTICLE' },
        { title: '专栏管理', key: 'CREATOR_CONTENT_SP_COLUMN' },
        {
          title: '沸点管理',
          key: 'CREATOR_CONTENT_PINS',
        },
      ],
    },
    {
      title: '数据中心',
      icon: IconComputer,
      children: [
        { title: '内容数据', key: 'CREATOR_DATA_CONTENT' },
        {
          title: '关注者数据',
          key: 'CREATOR_DATA_FOLLOWER_DATA',
        },
      ],
    },
    {
      title: '资源管理',
      icon: IconComputer,
      children: [
        { title: '我的订阅', key: 'CREATOR_RESOURCES_SUBSCRIPTION' },
        {
          title: '我的收藏',
          key: 'CREATOR_RESOURCES_FAVORITE',
        },
      ],
    },
    {
      title: '创作成长',
      icon: IconGift,
      children: [{ title: '创作等级权益', key: 'CREATOR_GROWTH_GRADE' }],
    },
    {
      title: '帮助中心',
      icon: IconQuestionCircle,
      children: [{ title: '常见问题', key: 'CREATOR_HELP_QUESTION' }],
    },
  ];

  const userStore = useUserStore();
  const userInfo = computed(() => userStore.getUserInfo);
  const menuMap = new Map();
  const router = useRouter();
  const selectedKeys = ref<string[]>([]);

  travelMenus(menus);

  watch(
    router.currentRoute,
    ({ matched }) => {
      const matchedMenu = findMatchedMenu(matched);
      if (matchedMenu) {
        selectedKeys.value = [matchedMenu.key];
      }
    },
    { immediate: true },
  );
  watch(
    () => selectedKeys.value[0],
    (name) => {
      if (name !== router.currentRoute.value.name) {
        router.push({ name });
      }
    },
  );

  function travelMenus(menus) {
    menus.forEach((item) => {
      if (!item.children) {
        menuMap.set(item.key, item);
      } else {
        travelMenus(item.children);
      }
    });
  }

  function findMatchedMenu(matched) {
    for (const item of matched) {
      if (menuMap.has(item.name)) {
        return menuMap.get(item.name);
      }
    }
  }
</script>

<template>
  <a-row :gutter="20">
    <a-col :span="5">
      <Affix :offsetTop="90">
        <Card class="h-full" hoverable :bodyStyle="{ height: '100%', padding: 0 }">
          <div class="h-full py-[16px]">
            <div class="mb-[40px] px-[16px]">
              <div class="flex mb-[32px] items-center">
                <div><Avatar :size="54" :imageUrl="userInfo?.icon" /></div>
                <div class="ml-[10px]">
                  <div class="text-[20px] text-black">{{ userInfo?.name }}</div>
                  <div class="text-[12px]">{{ userInfo?.introduce }}</div>
                </div>
              </div>
              <div
                ><a href="/editor/drafts/new" target="_blank"
                  ><Button type="primary" long>写文章</Button></a
                ></div
              ></div
            >
            <Menu
              class="h-full overflow-y-auto"
              v-model:selectedKeys="selectedKeys"
              autoOpen
              :levelIndent="30"
            >
              <template v-for="item in menus" :key="item.key">
                <MenuItem v-if="!item.children" v-bind="{ key: item.key }">
                  <template #icon v-if="item.icon">
                    <component :is="item.icon" />
                  </template>
                  {{ item.title }}
                </MenuItem>
                <SubMenu v-else v-bind="{ key: item.key }">
                  <template #icon v-if="item.icon">
                    <component :is="item.icon" />
                  </template>
                  <template #title v-if="item.title">{{ item.title }}</template>
                  <template v-for="subItem in item.children" :key="subItem.key">
                    <MenuItem
                      v-if="!subItem.children"
                      v-bind="{ key: subItem.key, title: subItem.title }"
                    >
                      <template #icon v-if="subItem.icon">
                        <component :is="subItem.icon" />
                      </template>
                      {{ subItem.title }}
                    </MenuItem>
                  </template>
                </SubMenu>
              </template>
            </Menu>
          </div>
        </Card>
      </Affix>
    </a-col>
    <a-col :span="19">
      <Affix :offsetTop="90">
        <RouterView />
      </Affix>
    </a-col>
  </a-row>
</template>
